// swiper插件初始化
var swiper = new Swiper(".swiper-container", {
  keyboard: true,
  virtualTranslate: true,
  on: {
    setTranslate: function () {
      this.$wrapperEl.transition("");
      TweenMax.to(this.$wrapperEl, 1.5, {
        x: this.translate,
        ease: Power4.easeOut,
      });
    },
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

// 排他功能
var body = document.getElementsByClassName("body")[0];
var list = body.getElementsByTagName("li");
var dvObjs = body.getElementsByTagName("div");
for (var i = 0; i < 5; i++) {
  list[i].setAttribute("index", i);
  list[i].onclick = function () {
    for (var j = 0; j < list.length; j++) {
      list[j].removeAttribute("class");
    }
    this.className = "current";

    for (var k = 0; k < dvObjs.length; k++) {
      dvObjs[k].removeAttribute("class");
    }
    var index = this.getAttribute("index");
    dvObjs[index].className = "current";
  };
}

var list1 = document.getElementById("uu1").getElementsByTagName("li");
var dvObj1s = document
  .getElementsByClassName("under")[0]
  .getElementsByClassName("container")[0]
  .getElementsByTagName("div");
for (var i = 0; i < list1.length; i++) {
  list1[i].setAttribute("index", i);
  list1[i].onclick = function () {
    for (var j = 0; j < list1.length; j++) {
      list1[j].removeAttribute("class");
    }
    this.className = "active";
    console.log(this);

    for (var k = 0; k < dvObj1s.length; k++) {
      dvObj1s[k].removeAttribute("class");
    }
    var index = this.getAttribute("index");
    dvObj1s[index].className = "current";
  };
}


var list2 = document
  .getElementsByClassName("senic")[0]
  .getElementsByTagName("li");
var dvObj2s = document
  .getElementsByClassName("pack")[0]
  .getElementsByTagName("div");
for (var i = 0; i < list2.length; i++) {
  list2[i].setAttribute("index", i);
  list2[i].onclick = function () {
    for (var j = 0; j < list2.length; j++) {
      list2[j].removeAttribute("class");
    }
    this.className = "active";
    console.log(this);

    for (var k = 0; k < dvObj2s.length; k++) {
      dvObj2s[k].removeAttribute("class");
    }
    var index = this.getAttribute("index");
    dvObj2s[index].className = "current";
  };
}

// 鼠标滑动时顶部固定
window.onscroll = function () {
  var value = document.documentElement.scrollTop;
  var head = document.getElementsByClassName("head")[0];
  var back = document.getElementsByClassName("back")[0];
  if (value >= 48) {
    head.style.position = "fixed";
    head.style.zIndex = "999";
    head.style.top = 0;
    back.style.marginTop = "48px";
  } else {
    head.style.position = "relative";
    back.style.marginTop = "0";
  }
};

// 轮播图点击导航按钮改变背景图
var objs = document.getElementsByClassName("swiper-pagination-bullet");
var back = document.getElementsByClassName("back")[0];
objs[0].onclick = function () {
  back.style.background = "url(./image/banner.png)";
  back.firstElementChild.setAttribute("src", "./image/banner01.png");
};
objs[1].onclick = function () {
  back.style.background = "url(./image/banner02.png)";
  back.firstElementChild.setAttribute("src", "./image/banner002.png");
};
objs[2].onclick = function () {
  back.style.background = "url(./image/banner03.png)";
  back.firstElementChild.setAttribute("src", "./image/banner3.png");
};

var slides = document.getElementsByClassName("swiper-slide");
console.log(slides);
for (var i = 0; i < slides.length; i++) {
  slides[i].removeAttribute("style");
}

//手风琴效果
var caseList = $(".case li");
$(caseList[0]).mouseenter(() => {
  $(caseList[0])
    .siblings()
    .stop(true)
    .animate({ width: "11%", height: "270px" })
    .removeClass("current");
  $(caseList[0])
    .stop(true)
    .animate({ width: "24%", height: "270px"})
    .addClass("current");
  $(caseList[0]).css({
    background: "url(../img/北戴河.png) no-repeat",
    backgroundSize: 'cover'
  });
  $(caseList[0]).empty();
  var h3 = $("<h3>北戴河</h3>");
  var p = $("<p>河北省秦皇岛市</p>");
  var span1 = $("<span>产品：全域旅游</span>");
  $(caseList[0]).append(h3, p, span1);
  $(caseList[0]).siblings().empty();

  var hong = $("<h4>红池坝智慧景区</h4>");
  $(caseList[1]).append(hong).css({
    background: "url(../image/红池坝.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var nan = $("<h4>南天湖智慧景区</h4>");
  $(caseList[2]).append(nan).css({
    background: "url(../image/南天湖.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var ji = $("<h4>吉县全域文旅大数据</h4>");
  $(caseList[3]).append(ji).css({
    background: "url(../image/吉县.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var du = $("<h4>都江堰景区客流管控</h4>");
  $(caseList[4]).append(du).css({
    background: "url(../image/都江堰.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var kai = $("<h4>开州智慧票务</h4>");
  $(caseList[5]).append(kai).css({
    background: "url(../image/开州.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
});

$(caseList[1]).mouseenter(() => {
  $(caseList[1])
    .siblings()
    .stop(true)
    .animate({ width: "11%", height: "270px" })
    .removeClass("current");
  $(caseList[1])
    .stop(true)
    .animate({ width: "24%", height: "270px" })
    .addClass("current");
  $(caseList[1]).css({
    background: "url(../img/红池坝.png) no-repeat",
    backgroundSize: 'cover'
  });
  $(caseList[1]).empty();
  var h3 = $("<h3>红池坝智慧景区</h3>");
  var p = $("<p>重庆</p>");
  var span1 = $("<span>产品：一机游</span>");
  $(caseList[1]).append(h3, p, span1);
  $(caseList[1]).siblings().empty();

  var bei = $("<h4>北戴河智慧景区</h4>");
  $(caseList[0]).append(bei).css({
    background: "url(../img/北戴河1.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var nan = $("<h4>南天湖智慧景区</h4>");
  $(caseList[2]).append(nan).css({
    background: "url(../image/南天湖.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var ji = $("<h4>吉县全域文旅大数据</h4>");
  $(caseList[3]).append(ji).css({
    background: "url(../image/吉县.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var du = $("<h4>都江堰景区客流管控</h4>");
  $(caseList[4]).append(du).css({
    background: "url(../image/都江堰.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var kai = $("<h4>开州智慧票务</h4>");
  $(caseList[5]).append(kai).css({
    background: "url(../image/开州.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
});

$(caseList[2]).mouseenter(() => {
  $(caseList[2])
    .siblings()
    .stop(true)
    .animate({ width: "11%", height: "270px" })
    .removeClass("current");
  $(caseList[2])
    .stop(true)
    .animate({ width: "24%", height: "270px"})
    .addClass("current");
  $(caseList[2]).css({
    background: "url(../img/南天湖.png) no-repeat",
    backgroundSize: 'cover'
  });
  $(caseList[2]).empty();
  var h3 = $("<h3>南天湖智慧景区</h3>");
  var p = $("<p>重庆市丰都县</p>");
  var span1 = $("<span>产品：智慧景区</span>");
  $(caseList[2]).append(h3, p, span1);
  $(caseList[2]).siblings().empty();

  var bei = $("<h4>北戴河智慧景区</h4>");
  $(caseList[0]).append(bei).css({
    background: "url(../img/北戴河1.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var hong = $("<h4>红池坝智慧景区</h4>");
  $(caseList[1]).append(hong).css({
    background: "url(../image/红池坝.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var ji = $("<h4>吉县全域文旅大数据</h4>");
  $(caseList[3]).append(ji).css({
    background: "url(../image/吉县.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var du = $("<h4>都江堰景区客流管控</h4>");
  $(caseList[4]).append(du).css({
    background: "url(../image/都江堰.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var kai = $("<h4>开州智慧票务</h4>");
  $(caseList[5]).append(kai).css({
    background: "url(../image/开州.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
});

$(caseList[3]).mouseenter(() => {
  $(caseList[3])
    .siblings()
    .stop(true)
    .animate({ width: "11%", height: "270px" })
    .removeClass("current");
  $(caseList[3])
    .stop(true)
    .animate({ width: "24%", height: "270px"})
    .addClass("current");
  $(caseList[3]).css({ background: "url(../img/吉县.png) no-repeat",backgroundSize: 'cover' });
  $(caseList[3]).empty();
  var h3 = $("<h3>吉县全域文旅</h3>");
  var p = $("<p>山西省临汾市</p>");
  var span1 = $("<span>产品：全域文旅</span>");
  $(caseList[3]).append(h3, p, span1);
  $(caseList[3]).siblings().empty();

  var bei = $("<h4>北戴河智慧景区</h4>");
  $(caseList[0]).append(bei).css({
    background: "url(../img/北戴河1.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var hong = $("<h4>红池坝智慧景区</h4>");
  $(caseList[1]).append(hong).css({
    background: "url(../image/红池坝.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var nan = $("<h4>南天湖智慧景区</h4>");
  $(caseList[2]).append(nan).css({
    background: "url(../image/南天湖.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var du = $("<h4>都江堰景区客流管控</h4>");
  $(caseList[4]).append(du).css({
    background: "url(../image/都江堰.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var kai = $("<h4>开州智慧票务</h4>");
  $(caseList[5]).append(kai).css({
    background: "url(../image/开州.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
});

$(caseList[4]).mouseenter(() => {
  $(caseList[4])
    .siblings()
    .stop(true)
    .animate({ width: "11%", height: "270px" })
    .removeClass("current");
  $(caseList[4])
    .stop(true)
    .animate({ width: "24%", height: "270px"})
    .addClass("current");
  $(caseList[4]).css({
    background: "url(../img/都江堰.png) no-repeat",
    backgroundSize: 'cover'
  });
  $(caseList[4]).empty();
  var h3 = $("<h3>都江堰</h3>");
  var p = $("<p>四川省</p>");
  var span1 = $("<span>产品：客流管控</span>");
  $(caseList[4]).append(h3, p, span1);
  $(caseList[4]).siblings().empty();

  var bei = $("<h4>北戴河智慧景区</h4>");
  $(caseList[0]).append(bei).css({
    background: "url(../img/北戴河1.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var hong = $("<h4>红池坝智慧景区</h4>");
  $(caseList[1]).append(hong).css({
    background: "url(../image/红池坝.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var nan = $("<h4>南天湖智慧景区</h4>");
  $(caseList[2]).append(nan).css({
    background: "url(../image/南天湖.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var ji = $("<h4>吉县全域文旅大数据</h4>");
  $(caseList[3]).append(ji).css({
    background: "url(../image/吉县.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var kai = $("<h4>开州智慧票务</h4>");
  $(caseList[5]).append(kai).css({
    background: "url(../image/开州.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
});

$(caseList[5]).mouseenter(() => {
  $(caseList[5])
    .siblings()
    .stop(true)
    .animate({ width: "11%", height: "270px" })
    .removeClass("current");
  $(caseList[5])
    .stop(true)
    .animate({ width: "24%", height: "270px"})
    .addClass("current");
  $(caseList[5]).css({ background: "url(../img/开州.png) no-repeat", backgroundSize: 'cover' });
  $(caseList[5]).empty();
  var h3 = $("<h3>开州</h3>");
  var p = $("<p>重庆市</p>");
  var span1 = $("<span>产品：一机游</span>");
  $(caseList[5]).append(h3, p, span1);
  $(caseList[5]).siblings().empty();

  var bei = $("<h4>北戴河智慧景区</h4>");
  $(caseList[0]).append(bei).css({
    background: "url(../img/北戴河1.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var hong = $("<h4>红池坝智慧景区</h4>");
  $(caseList[1]).append(hong).css({
    background: "url(../image/红池坝.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var nan = $("<h4>南天湖智慧景区</h4>");
  $(caseList[2]).append(nan).css({
    background: "url(../image/南天湖.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var ji = $("<h4>吉县全域文旅大数据</h4>");
  $(caseList[3]).append(ji).css({
    background: "url(../image/吉县.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var du = $("<h4>都江堰景区客流管控</h4>");
  $(caseList[4]).append(du).css({
    background: "url(../image/都江堰.png) no-repeat",
    backgroundSize: "75px",
    backgroundPosition: "center",
    backgroundColor: "#f4f5f5",
  });
  var kai = $("<h4>开州智慧票务</h4>");
});

// 屏幕可视宽度低于950px时，顶部导航部分隐藏
var headUl = document.getElementsByClassName('head')[0].getElementsByTagName('ul')[0]
console.log($(window).width());
window.onresize = function(){
  if($(window).width() <= 1020){
    $(headUl).css({display: 'none'})
  }else {
    $(headUl).css({display: 'block'})
  }
}